<template>
  <div ref="chart" style="width: 100%;height: 230px"></div>
</template>

<script>
export default {
  name: "homePie",
  data(){
    return{

    }
  },
  mounted() {
this.getEcharts()
  },
  methods:{
    getEcharts() {
      const chart = this.$refs.chart;
        const myChart = this.$echarts.init(chart);
        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: '考勤明细',
              type: 'pie',
              center: ['25%', '50%'],
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 20,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                {value: 50, name: '正常'},
                {value: 20, name: '早退'},
                {value: 20, name: '迟到'},
                {value: 10, name: '缺勤'}
              ],
              color:['lightgreen','orange','gray','red']
            },
            {
              name: '任务完成度',
              type: 'pie',
              center: ['70%', '50%'],
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 20,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                {value: 60, name: '已完成'},
                {value: 40, name: '未完成'},
              ],
              color:['lightgreen','orange']
            }
          ]
        };
        myChart.setOption(option);
        //   //当窗口发送变化的时候，改变图表的大小
        //   window.addEventListener("resize", function () {
        //     myChart.resize();
        //   });
        // }
        // //防止多次触发窗口发送变化
        // this.$on("hook:destroyed", () => {
        //   window.removeEventListener("resize", function () {
        //     myChart.resize();
        //   });
        // });
      }
    }


}
</script>

<style scoped>

</style>
